<template>
    <div>
        <DialogVue :data="data.dialog" @close="onClose">
            <template #content>
                <el-form
                    ref="ruleFormRef"
                    :inline="true"
                    :model="data.information"
                    :rules="data.rules"
                    label-width="100px"
                    style="width: 100%; display: flex; flex-wrap: wrap"
                >
                    <el-form-item label="上级菜单：" prop="menuName" style="width: 100%">
                        <el-tree-select
                            node-key="title"
                            style="width: 100%"
                            placeholder="选择上级菜单"
                            :check-strictly="true"
                            v-model="data.information.menuName"
                            :data="data.defaultMenu"
                            clearable
                            :show-count="true"
                            @current-change="data.onMenuDialogChange"
                            :disabled="
                                Number(data.information.menuType) !== 1 && Number(data.dialog.menuType) === 1
                                    ? false
                                    : true
                            "
                        />
                    </el-form-item>
                    <el-form-item label="菜单类型：" prop="menuType" style="width: 100%">
                        <el-radio-group v-model="data.information.menuType" @change="onSelectRadioChange">
                            <template v-if="data.dialog.type === 'create'">
                                <el-radio label="1" v-if="Number(data.dialog.menuType) === 1">目录</el-radio>
                                <el-radio
                                    label="2"
                                    v-if="Number(data.dialog.menuType) === 1 || Number(data.dialog.menuType) === 2"
                                    >菜单</el-radio
                                >
                                <el-radio
                                    label="3"
                                    v-if="Number(data.dialog.menuType) === 1 || Number(data.dialog.menuType) === 3"
                                    >按钮权限</el-radio
                                ></template
                            >
                            <template v-else-if="data.dialog.type === 'edit'">
                                <el-radio
                                    label="1"
                                    v-if="Number(data.dialog.menuType) === 2 && data.information.parentId === ''"
                                    >目录</el-radio
                                >
                                <el-radio
                                    label="2"
                                    v-if="Number(data.dialog.menuType) === 2 && data.information.parentId"
                                    >菜单</el-radio
                                >
                                <el-radio label="3" v-if="Number(data.dialog.menuType) === 3">按钮权限</el-radio>
                            </template>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="菜单名称：" prop="name" style="width: calc(50% - 32px)">
                        <el-input v-model="data.information.name" placeholder="请输入菜单名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item
                        v-if="Number(data.information.menuType) === 1"
                        label="菜单图标："
                        prop="icon"
                        style="width: calc(50% - 32px)"
                    >
                        <el-popover placement="bottom" :width="600" trigger="click">
                            <template #reference>
                                <el-input
                                    v-model="data.information.icon"
                                    :prefix-icon="data.information.icon"
                                    clearable
                                />
                            </template>
                            <el-input type="text" v-model="data.iconInput" clearable @input="data.onIconInput" />
                            <div class="icon-box">
                                <div class="icon-list">
                                    <div
                                        class="icon-item"
                                        v-for="(item, index) in data.iconList"
                                        :key="index"
                                        @click="data.onClickSelectIcon(item)"
                                    >
                                        <component
                                            class="icons"
                                            :is="item"
                                            style="width: 18px; height: 18px; margin-right: 8px"
                                        />
                                        <span>{{ item }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-popover>
                    </el-form-item>

                    <el-form-item
                        label="显示排序："
                        prop="sort"
                        style="width: calc(50% - 32px)"
                        v-if="Number(data.information.menuType) !== 3"
                    >
                        <el-input-number
                            v-model="data.information.sort"
                            class="mx-4"
                            :min="1"
                            controls-position="right"
                            style="width: 100%"
                        />
                    </el-form-item>
                    <el-form-item
                        v-if="Number(data.information.menuType) === 2"
                        label="路由地址："
                        prop="routerPath"
                        style="width: calc(50% - 32px)"
                    >
                        <el-input
                            v-model="data.information.routerPath"
                            placeholder="请输入路由地址"
                            clearable
                        ></el-input>
                    </el-form-item>

                    <el-form-item
                        v-if="Number(data.information.menuType) === 2"
                        label="组件路径："
                        prop="component"
                        style="width: calc(50% - 32px)"
                    >
                        <el-input
                            v-model="data.information.component"
                            placeholder="请输入组件路径"
                            clearable
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="权限字符：" prop="permission" style="width: calc(50% - 32px)">
                        <el-input
                            v-model="data.information.permission"
                            placeholder="请输入权限字符"
                            clearable
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        v-if="Number(data.information.menuType) === 3"
                        label="Api 接口："
                        prop="api"
                        style="width: 100%"
                    >
                        <el-input v-model="data.information.api" placeholder="请输入Api 接口" clearable></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="菜单状态：" prop="status" style="width: calc(50% - 32px)">
                        <el-radio-group v-model="data.information.status" class="ml-4">
                            <el-radio label="1">启用</el-radio>
                            <el-radio label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                </el-form>

                <span class="btn">
                    <el-button type="primary" @click="onClickDialogConfirm(ruleFormRef)">确定</el-button>
                    <el-button @click="onClose">取消</el-button>
                </span>
            </template>
        </DialogVue>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import { FormInstance } from 'element-plus'
import DialogVue from '@/components/baseDialog/Index.vue'
import EditMenuData from '.'

//接收父组件传递的参数
const props = defineProps(['data'])
//注册父组件的回调方法
const emits = defineEmits(['hidden'])
//初始化数据
const data = reactive(new EditMenuData())
// 表单form ref
const ruleFormRef = ref<FormInstance>()

/**
 * 监听父组件传递的参数变化
 */
watchEffect(() => {
    data.dialog.visible = props.data.visible
    if (props.data.visible) {
        data.dialog.title = props.data.type === 'edit' ? '修改菜单' : '新增菜单'
        data.dialog.type = props.data.type
        data.dialog.menuType = props.data.menuType
        data.information.menuType = props.data.menuType
        data.information.menuName = props.data.menuName

        if (props.data.type === 'edit') {
            data.information.icon = props.data.data.icon
            data.information.sort = props.data.data.sort
            data.information.routerPath = props.data.data.url
            data.information.component = props.data.data.component
            data.information.permission = props.data.data.code
            data.information.visible = props.data.data.status
            data.information.name = props.data.data.name
            data.information.id = props.data.data.id
            data.information.parentId = props.data.data.parentId
            data.information.api = props.data.data.url
            if (!props.data.data.parentId) {
                // data.dialog.menuType = 1
                data.information.menuType = '1'
            }
        } else {
            data.information.icon = ''
            data.information.sort = 1
            data.information.routerPath = ''
            data.information.component = ''
            data.information.permission = ''
            data.information.visible = true
            data.information.name = ''
            data.information.api = ''
            if (props.data.data) {
                data.information.parentId = props.data.data.parentId
                data.information.id = props.data.data.id
            }
            // console.log(' data.information', data.information)
        }
    }

    // console.log('props', props.data, data.information, data.dialog)
})

/**
 * 监听弹窗 点击确定按钮
 * @param formEl
 */
const onClickDialogConfirm = async (formEl: FormInstance | undefined) => {
    console.log(data.information.id, data.information.parentId)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            //
            data.onComfirm(() => {
                onClose()
            })
        } else {
            console.log('error submit！', fields)
        }
    })
}

const onSelectRadioChange = (res: string) => {
    if (ruleFormRef.value) {
        ruleFormRef.value.resetFields()
    }
    data.information.menuName = ''
    data.information.menuType = res
}

/**
 * 监听弹窗关闭
 */
const onClose = () => {
    if (ruleFormRef.value) {
        ruleFormRef.value.resetFields()
    }
    emits('hidden')
}
</script>
<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: end;
    margin-top: 16px;
}

.icon-box {
    box-sizing: border-box;
    padding: 10px;

    .icon-list {
        max-height: 400px;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;

        .icon-item {
            width: 33.33%;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;

            &:hover {
                color: var(--color-danger);
            }
        }
    }
}
</style>
